<template>
	<div>
		<x-header :left-options="{showBack: false}"  style="" >注册<a slot="right"  href="#/login">已有账户</a></x-header>
		<div class="login-box redister-box">
			<label for="idcard"><i class="iconfont icon-idcard"></i><input id="idcard" v-model="idCardNum" type="text" placeholder="请输入身份证"></label>
			<label for="idname"><i class="iconfont icon-idname"></i><input id="idname" v-model="realName" type="text" placeholder="请输入姓名"></label>
			<label for="idcard"><i class="iconfont icon-phone"></i><input id="phone" v-model="phone" type="text" placeholder="请输入手机号码"></label>
			<label for="idcard"><i class="iconfont icon-email"></i><input id="email" v-model="email" type="text" placeholder="请输入电子邮件"></label>
			<label for="idcard"><i class="iconfont icon-address"></i><input id="address" v-model="address" type="text" placeholder="请输入地址"></label>
			<x-button @click.native="onRegister" type="primary">注册</x-button>
		</div>
	</div>	
</template>
<script>
import { XButton,Cell,XHeader} from 'vux';
import config from '../config.js';

export default {
	data () {
		return {
			realName: '',
			idCardNum: '',
			email: '',
			phone: '',
			address: ''
		}
	},
	methods:{
		onRegister(){
      const { realName, idCardNum, email, phone, address }=this;
			if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCardNum) === false) {
        this.$vux.toast.show({
              text:"请输入正确身份证",
              type:'warn'
            })
	       return 
		  }
      if (realName === '') {
          this.$vux.toast.show({
            text:"请输入姓名",
            type:'warn'
          })
          return
      }
      if (/^1[3|4|5|7|8][0-9]\d{8}$/.test(phone) === false) {
          this.$vux.toast.show({
            text:"请输入正确手机号",
            type:'warn'
          })
          return
      }
      if (/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(email) === false) {
          this.$vux.toast.show({
            text:"请输入正确邮箱",
            type:'warn'
          })
          return
      }
      if (address === '') {
          this.$vux.toast.show({
            text:"请输入地址",
            type:'warn'
          })
          return
      }
      this.$vux.loading.show({
        text: '加载中'
      })
      this.$http({
        url:config.base+"student/register",
        method:"POST",
        headers:{
          'content-type':'application/x-www-form-urlencoded; charset=UTF-8',
        },
        timeout:10000,
        data:this.qs.stringify({ idCardNum, realName, phone, address, email })
      }).then( rep => {
        let data=rep.data;
        data.status===200?
        this.$vux.toast.show({
            text:data.message
          })
        :
        this.$vux.toast.show({
            text:data.message,
            type:'warn'
          })
        this.realName = '';
        this.idCardNum = '';
        this.phone = '';
        this.address = '';
        this.email = '';
        this.$vux.loading.hide()
      }).catch( (error) => {
        this.$vux.loading.hide()
        this.$vux.toast.show({
          text:'网络错误',
          type:'warn'
        })
      })
    }
  },
	components:{
		XButton,
		Cell,
		XHeader
	}
}
</script>
<style >
	.login-box.redister-box{margin-top:10%;width:80%;margin-left:10%;}
	.login-box.redister-box i{color:#35495E;}
</style>